<template>
  <div>
    <!-- 查询部分 -->
    <div class="mg-0_5em">
      <el-form :inline="true" :model="userQuery" ref="userQueryRef" class="demo-form-inline">
        <el-form-item label="用户名" prop="username">
          <el-input v-model="userQuery.username" placeholder="用户名" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="userQuery.phone" placeholder="手机号" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :icon="Search" @click="initUserList">查询</el-button>
          <el-button type="success" :icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- table部分 -->
    <div class="mg-0_5em">
      <div class="w-100 mb-0_5em flex-container flex-row-left">
        <el-button type="primary" :icon="CirclePlus" @click="openUserDialog()"> 添加用户 </el-button>
      </div>
      <el-table :data="userList" border ref="tableRef" row-key="id">
        <el-table-column type="index" width="50" />
        <el-table-column prop="username" label="用户名" align="center" />
        <el-table-column prop="phone" label="手机号" align="center" />
        <el-table-column prop="email" label="邮箱" align="center" />
        <el-table-column prop="nickName" label="昵称" align="center"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center">
          <template #default="{ row }">
            {{ GenderEnum.getEnumByValue(row.gender).label }}
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-popover placement="right" width="280" trigger="hover" :popper-style="{ 'background-color': '#ecf5ff', 'border-color': 'white' }">
              <template #reference>
                <el-button type="primary" size="small" :icon="Setting"></el-button>
              </template>
              <div class="flex-container flex-row-center">
                <div class="ml-1em">
                  <el-button type="primary" size="small" :icon="Edit" @click="openUserDialog(row)">修改 </el-button>
                </div>
                <div class="ml-1em">
                  <el-popconfirm
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    :icon="Delete"
                    icon-color="red"
                    title="确定删除?"
                    @confirm="deleteUser(row.id)">
                    <template #reference>
                      <div>
                        <el-button type="danger" size="small" :icon="Delete">删除</el-button>
                      </div>
                    </template>
                  </el-popconfirm>
                </div>
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页部分 -->
    <div class="mr-0_5em mt-1em flex-container flex-row-right">
      <pagination ref="paginationRef" @change="initUserList"></pagination>
    </div>

    <edit-user ref="editUserRef" @success="initUserList" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Search, Refresh, CirclePlus, Edit, Setting, Delete } from '@element-plus/icons-vue'
import Pagination from '@/components/Pagination/index.vue'
import EditUser from './components/EditUser.vue'
import User from '@/api/sys/user'
import GenderEnum from '@/enums/GenderEnum'

// 生命周期, 初始化数据
onMounted(() => {
  initUserList()
})

// 查询条件
const userQuery = ref({
  username: '',
  phone: '',
})

/**
 * 用户数据
 */
const userList = ref([])

// 分页组件
const paginationRef = ref()

/**
 * 初始化列表
 */
async function initUserList(pageInfo) {
  if (!pageInfo) {
    pageInfo = { current: 1, size: 10, total: 0 }
  }
  pageInfo.condition = userQuery.value
  const { result } = await User.page(pageInfo)
  const { total, records } = result
  userList.value = records
  paginationRef.value.changeTotal(total, pageInfo.size)
}

// 查询条件表单
const userQueryRef = ref()

// 重置查询条件
function resetQuery() {
  let pageInfo = { current: 1, size: 10, total: 0 }
  userQueryRef.value.resetFields()
  console.log(userQueryRef.value)
  initUserList(pageInfo)
}

// 编辑组件
const editUserRef = ref()

/**
 * 打开弹框
 */
function openUserDialog(user) {
  editUserRef.value.switchDialog(user)
}

/**
 * 删除
 * @param id
 */
function deleteUser(id) {
  User.delete(id).then(() => {
    initUserList()
  })
}
</script>

<style lang="scss"></style>
